<template>
  <div>
      <!-- 
        插槽:solt
        1.默认插槽
        2.命名插槽
        插槽:提前把布局写完,使用时在存入具体的展示内容
       -->
      <my-slot>
        <!-- 自定义组件,双标签写法中的内容,会替换掉默认插槽 -->
        <a href="">坤坤1</a>
        <a href="">坤坤2</a>
        <a href="">坤坤3</a>
        <a href="">坤坤4</a>
        <a href="">坤坤5</a>

        <!-- 放到名字是left的插槽里 -->
        <!-- <ul slot="left">
          <li>1111111</li>
          <li>1111111</li>
          <li>1111111</li>
          <li>1111111</li>
        </ul> -->

        <!-- 
          vue2.6版本中,更新了新的语法
          必须在虚拟的template标签作为父元素,此标签不是实际存在的dom元素,仅仅代表在一个包围
         -->

        <!-- 新语法有语法糖:#插槽名 -->
        <template #right>
          <li>太酷啦</li>
          <li>太酷啦</li>
          <li>太酷啦</li>
          <li>太酷啦</li>
        </template>

      </my-slot>
  </div>
</template>

<script>
import MySlot from './components/MySlot.vue'
  export default {
  components: { MySlot },
    
  }
</script>

<style lang="scss" scoped>

</style>